<template>
  <div class="mod-prod-info same-city">
    <el-form
      @submit.native.prevent
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      label-width="120px"
      size="small"
    >
      <el-form-item :label="this.$i18n.t('shop.charges') + '：'">
        <div>
          <el-radio v-model="dataForm.chargeType" :label="0">{{
            $t("shop.freeDelivery")
          }}</el-radio>
          <!-- <el-radio v-model="dataForm.chargeType" :label="1">{{
            $t("shop.chaDelFeeByReg")
          }}</el-radio> -->
          <el-radio v-model="dataForm.chargeType" :label="2">{{
            $t("shop.delFeeChaDis")
          }}</el-radio>
        </div>
        <!-- <span v-if="dataForm.chargeType === 1" style="color: gray">{{
          $t("shop.chaFixDelFeeByRe")
        }}</span> -->
        <span v-if="dataForm.chargeType === 2" style="color: gray">{{
          $t("shop.byWalkDis")
        }}</span>
      </el-form-item>
      <el-form-item
        :label="this.$i18n.t('shop.deliveryFeeY') + '：'"
        prop="deliveryFee"
        v-if="dataForm.chargeType === 2"
      >
        <el-col :span="6">
          <el-input-number
            :max="100000"
            :placeholder="this.$i18n.t('shop.deliveryFee')"
            size="small"
            v-model="dataForm.deliveryFee"
            :min="0.0"
            :precision="2"
            :step="0.01"
          ></el-input-number>
        </el-col>
      </el-form-item>
      <el-form-item
        :label="this.$i18n.t('shop.costAllocation') + '：'"
        style="color: gray"
        prop="headDistance"
        v-if="dataForm.chargeType === 2"
      >
        <span style="fontsize: 15px">{{ $t("shop.tipDistance") }}</span>
        <el-input-number
          :max="100000"
          v-model="dataForm.headDistance"
          size="small"
          :precision="1"
          :min="0.1"
          :step="0.1"
        ></el-input-number>
        <span style="fontsize: 15px">{{ $t("shop.withinM") }}</span>
        <el-input-number
          :max="100000"
          v-model="dataForm.deliveryFee"
          size="small"
          :min="0.0"
          :precision="2"
          :step="0.01"
        ></el-input-number>
        <span style="fontsize: 15px">{{ $t("shop.yuanToChaDelFee") }}</span>
        <el-input-number
          :max="100000"
          v-model="dataForm.overDistance"
          size="small"
          :precision="1"
          :step="0.1"
          :min="0.1"
        ></el-input-number>
        <span style="fontsize: 15px">m，{{ $t("shop.incInDelFees") }}</span>
        <el-input-number
          :max="100000"
          v-model="dataForm.overDistanceFee"
          size="small"
          :precision="2"
          :step="0.01"
          :min="0.01"
        ></el-input-number>
        <span style="fontsize: 15px">{{ $t("platform.dollar") }}。</span>
      </el-form-item>
      <!-- <el-form-item
        :label="this.$i18n.t('shop.renewalCharge') + '：'"
        prop="prodName"
        v-show="false"
      >
        <span style="fontsize: 15px">{{ $t("shop.commodityWeight") }}</span>
        <el-input-number
          :max="100000"
          v-model="dataForm.freeWeight"
          :precision="2"
          :step="0.01"
          :min="0.01"
          :placeholder="this.$i18n.t('shop.pleaseEnterTheWeight')"
          size="small"
        ></el-input-number>
        <span style="fontsize: 15px">{{ $t("shop.noExtraCharge") }}</span>
        <el-input-number
          :max="100000"
          v-model="dataForm.overWeight"
          :precision="2"
          :step="0.01"
          :min="0.01"
          :placeholder="this.$i18n.t('shop.pleaseEnterTheWeight')"
          size="small"
        ></el-input-number>
        <span style="fontsize: 15px"
          >kg，{{ $t("shop.renewalFeeIncrease") }}</span
        >
        <el-input-number
          :max="100000"
          v-model="dataForm.overWeightFee"
          :precision="2"
          :step="0.01"
          :min="0.01"
          size="small"
        ></el-input-number>
        <span style="fontsize: 15px">{{ $t("admin.dollar") }}。</span>
      </el-form-item>
       -->
      <el-form-item>
        <div class="default-btn primary-btn" @click="dataFormSubmit()">
          {{ $t("outlet.saveSettings") }}
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import Big from "big.js";
  export default {
    data() {
      return {
        isDataTrue: false,
        show: false,
        dataForm: {
          chargeType: 2,
          // status: 0,
          // startingFee: 0.0,
          deliveryFee: 0.0,
          headDistance: 0.0,
          overDistance: 0.0,
          overDistanceFee: 0.0,
          // freeWeight: 0.0,
          // overWeight: 0.0,
          // overWeightFee: 0.0,
          // needMinutes: "00:30:00",
          discount: 1,
        },
        dataRule: {
          // startingFee: [
          //   {
          //     required: true,
          //     message: this.$i18n.t("shop.stargFeeCannoEmp"),
          //     trigger: "blur",
          //   },
          // ],
          deliveryFee: [
            {
              required: true,
              message: this.$i18n.t("shop.delFeeCannoEmp"),
              trigger: "blur",
            },
          ],
        },
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      };
    },
    components: {
      Big,
    },
    created: function () {
      // this.getDataInfo();
      this.getSameCityDetail();
    },
    computed: {},
    activated() {},
    methods: {
      /**
       * 获取店铺楼内闪送的配置
       */
      getSameCityDetail() {
        this.$http({
          url: this.$http.adornUrl(`/sys/pconfig/info/RIDER_DELIVERY_FEE`),
          method: "get",
          params: this.$http.adornParams(),
        }).then(({ data }) => {
          if (data) {
            this.dataForm = JSON.parse(data);
          }
        });
      },
      convertTimeToMinutes(timeString) {
        const timeComponents = timeString.split(":");
        const hours = parseInt(timeComponents[0], 10);
        const minutes = parseInt(timeComponents[1], 10);
        const totalMinutes = hours * 60 + minutes;
        return totalMinutes;
      },
      convertMinutesToTime(minutes) {
        if (!minutes) {
          return `00:30:00`;
        }
        const hours = Math.floor(minutes / 60);
        const remainingMinutes = minutes % 60;
        const hoursString = hours.toString().padStart(2, "0");
        const minutesString = remainingMinutes.toString().padStart(2, "0");
        return `${hoursString}:${minutesString}:00`;
      },
      /**
       * 关闭地图说明标签
       */
      infoWindowClose() {
        this.show = false;
      },
      /**
       * 打开地图说明标签
       */
      infoWindowOpen() {
        this.show = true;
      },
      // 表单提交
      dataFormSubmit() {
        if (this.dataForm.chargeType == 2) {
          this.checkData();
          if (!this.isDataTrue) {
            return;
          }
          this.dataForm.discount = 1;
        } else if (this.dataForm.chargeType == 0) {
          this.dataForm.discount = 0;
        }
        let p = {
          paramKey: "RIDER_DELIVERY_FEE",
          paramValue: JSON.stringify(this.dataForm),
          remark: "配送费设置",
        };
        this.$refs["dataForm"].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/sys/pconfig/save`),
              method: "post",
              data: this.$http.adornData(p),
            }).then(({ data }) => {
              this.getSameCityDetail();
              this.$message({
                message: this.$i18n.t("publics.operation"),
                type: "success",
                duration: 1500,
              });
            });
          }
        });
      },
      checkData() {
        // if (this.dataForm.overWeightFee == null) {
        //   this.errorMsg(this.$i18n.t("shop.costCannotBeEmpty"));
        //   this.isDataTrue = false;
        //   return;
        // }
        if (
          this.dataForm.chargeType === 2 &&
          this.dataForm.overDistanceFee == null
        ) {
          this.errorMsg(this.$i18n.t("shop.excDisFeeCanBeEm"));
          this.isDataTrue = false;
          return;
        }
        if (
          this.dataForm.chargeType === 2 &&
          (this.dataForm.headDistance == null ||
            this.dataForm.overDistance == null)
        ) {
          this.errorMsg(this.$i18n.t("shop.distanceCannotBeEmpty"));
          this.isDataTrue = false;
          return;
        }
        // if (
        //   !this.dataForm.freeWeight == null ||
        //   !this.dataForm.overWeight == null
        // ) {
        //   this.errorMsg(this.$i18n.t("shop.weightCannotBeEmpty"));
        //   this.isDataTrue = false;
        //   return;
        // }
        this.isDataTrue = true;
      },
      errorMsg(message) {
        this.$message({
          message: message,
          type: "error",
          duration: 1500,
        });
      },
    },
  };
</script>
<style lang="scss" scoped>
  .same-city {
    .el-form-item--small.el-form-item {
      margin-bottom: 20px;
    }
    .status-tips {
      color: #999999;
      margin-left: 20px;
    }
    .map {
      width: 50%;
      height: 500px;
    }
    .el-input-number--small {
      width: 172px;
    }
  }
</style>
